import { Component, Emit, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import DialogAddRole from './DialogAddRole'
import { Button } from 'ant-design-vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import { h } from 'vue'

@Component
export class AddButton extends Render {
    @Prop() roleId!: number

    showDialog = false

    @Emit('refresh')
    handleRefresh() {}

    onShowDialog() {
        this.showDialog = true
    }

    render() {
        return (
            <div class="mb-20px">
                <Button type="primary" icon={h(PlusOutlined)} onClick={this.onShowDialog}>
                    新建角色
                </Button>
                <DialogAddRole
                    v-model:show={this.showDialog}
                    roleId={this.roleId}
                    onRefresh={this.handleRefresh}
                />
            </div>
        )
    }
}

export default toNative<{ roleId: number }, { refresh: () => void }>(AddButton)
